<!DOC>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* vertical-align垂直对齐只对行内元素或行内块元素起作用 */
        /* vertical-align: baseline(默认,基线) ||top ||middle ||bottom */
        .one {
            vertical-align: baseline;
        }
        .two {
            vertical-align: top;
        }
        .three {
            vertical-align: middle;
        }
        .four {
            vertical-align: bottom;
        }
        .tupian1 {
            border: 1px solid yellow;
        }
        .tupian2 img {
            border: 1px solid yellow;
            vertical-align: bottom;
        }
    </style>
</head>
<body>
    <!-- 1.图片、表单和文字对齐 -->
    <div><img src="../../../imgs/exo.jpg" class="one">baseline</div>
    <div><img src="../../../imgs/exo.jpg" class="two">top</div>
    <div><img src="../../../imgs/exo.jpg" class="three">middle</div>
    <div><img src="../../../imgs/exo.jpg" class="four">bottom</div>
    <!-- 1.图片、表单和文字对齐 -->

    <!-- 2.去除图片底侧空白缝隙 -->
    <div class="tupian1">
        <img src="../../../imgs/exo.jpg" alt="">
    </div>
    <div class="tupian2">
        <img src="../../../imgs/exo.jpg" alt="">
    </div>
    <!-- 也可将图片转换为块级元素 但可能出现别的问题 -->
    <!-- 2.去除图片底侧空白缝隙 -->
</body>
</html>